<template>
	<div class=" mt10">

		<div class="mb10 w100  bgfff bra8 pad10" style="display: flex;justify-content: space-between;">
			<div style="flex: 1;margin-right: 20px;">
				<div class="displayFlex">
					<el-date-picker v-model="params.recordDate" type="month" placeholder="日期"
						@change="countMonthMaterialUse"></el-date-picker>
				</div>

				<div style="background: #3F44C9;color: #fff;" class="mt20 pad20 bra8" v-if="materialList1[selectIndex]">
					<div class="mb10">
						{{materialList1[selectIndex].materialName}}
					</div>
					<div class="font18">
						{{materialList1[selectIndex].qty}}{{materialList1[selectIndex].unitValue}}
					</div>
				</div>
			</div>

			<div style="flex: 3;">
				<div class="displayFlexBet">
					<div @click="nextItem('-')">
						<img src="@/assets/sIcon128.png" style="height: 40px;width: 35px;" />
					</div>
					<div style="width: calc(100% - 120px);text-align: left;flex-wrap: nowrap;overflow-x: auto;"
						class="displayFlex">
						<div v-for="(item,index) in materialList1" :key="index" class="point" style="margin-right:116px"
							@click="selectIndex = index,getDefInspectStdBook()"
							:style="{'color': selectIndex == index?'#3A3EF4':'#888'}">
							<div style="font-size: 15px;">{{item.materialName}}</div>
							<div style="font-size: 12px;">{{item.qty}}{{item.unitValue}}</div>
						</div>
					</div>
					<div @click="nextItem('+')">
						<img src="@/assets/sIcon129.png" style="height: 40px;width: 35px;" />
					</div>
				</div>

				<div>
					<el-table :data="dataList1" style="background: #fff;" size="mini" stripe height="300">
						<el-table-column type="index" width="80" label="编号">
						</el-table-column>
						<el-table-column prop="useTime" label="时间" width="100">
							<template slot-scope="scope">
								<div v-if="scope.row.useTime">{{scope.row.useTime.split(" ")[0]}}</div>
							</template>
						</el-table-column>
						<el-table-column prop="materialName" label="药剂/耗材名称">
						</el-table-column>
						<el-table-column prop="useQty" label="用量">
							<template slot-scope="scope">
								<div>{{scope.row.useQty}}{{scope.row.unitValue}}</div>
							</template>
						</el-table-column>
						<el-table-column prop="runTime" label="使用时间">
							<template slot-scope="scope">
								<div>{{scope.row.runTime}}小时</div>
							</template>
						</el-table-column>
						<el-table-column prop="useStateStr" label="使用状态">
						</el-table-column>
						<el-table-column prop="userName" label="负责人">
						</el-table-column>
					</el-table>
				</div>

			</div>
		</div>


		<div class="w100  bgfff bra8 pad10 mt10" style="display: flex;justify-content: space-between;">
			<div style="flex: 1;margin-right: 20px;">
				<div class="displayFlex">
					<el-date-picker v-model="params2.recordDate" type="year" placeholder="日期"
						@change="countYearMaterialUse" value-format="yyyy"></el-date-picker>
				</div>

				<div style="background: #63CD92;color: #fff;" class="mt20 pad20 bra8"
					v-if="materialList2[selectIndex2]">
					<div class="mb10">
						{{materialList2[selectIndex2].materialName}}
					</div>
					<div class="font18">
						{{materialList2[selectIndex2].qty}}{{materialList2[selectIndex2].unitValue}}
					</div>
				</div>
			</div>

			<div style="flex: 3;">
				<div class="displayFlexBet">
					<div @click="nextItem2('-')">
						<img src="@/assets/sIcon128.png" style="height: 40px;width: 35px;" />
					</div>
					<div style="width: calc(100% - 120px);text-align: left;flex-wrap: nowrap;overflow-x: auto;"
						class="displayFlex">
						<div v-for="(item,index) in materialList2" :key="index" class="point" style="margin-right:116px"
							@click="selectIndex2 = index,getMonthMaterialUseList()"
							:style="{'color': selectIndex2 == index?'#3A3EF4':'#888'}">
							<div style="font-size: 15px;">{{item.materialName}}</div>
							<div style="font-size: 12px;">{{item.qty}}{{item.unitValue}}</div>
						</div>
					</div>
					<div @click="nextItem2('+')">
						<img src="@/assets/sIcon129.png" style="height: 40px;width: 35px;" />
					</div>
				</div>

				<div>
					<div id="chart12" style="width: 100%;height: 300px;"></div>
				</div>

			</div>
		</div>

	</div>
</template>

<script>
	import {
		Session
	} from '@/utils/storage';
	import moment from 'moment'
	import * as echarts from 'echarts';

	let that
	export default {
		props: ['defenceId'],
		data() {
			return {
				params: {
					defenceId: '',
					materialId: '',
					startTime: '',
					endTime: '',
					recordDate: moment().format('YYYY-MM-DD'),
					pageIndex: 1,
					pageSize: 99999,
				},
				dataList1: [],
				materialList1: [],
				selectIndex: 0,

				params2: {
					defenceId: '',
					materialId: '',
					startTime: '',
					endTime: '',
					recordDate: moment().format('YYYY'),
					pageIndex: 1,
					pageSize: 99999,
				},
				dataList2: [],
				materialList2: [],
				selectIndex2: 0,
			}
		},
		mounted: function() {
			that = this
			that.params.defenceId = that.defenceId
			that.params2.defenceId = that.defenceId

			that.countMonthMaterialUse()
			that.countYearMaterialUse()
		},

		methods: {

			nextItem(type) {
				if (type == '-') {
					if (that.selectIndex == 0) return
					else that.selectIndex -= 1
				}
				if (type == '+') {
					if (that.selectIndex == that.materialList1.length - 1) return
					else that.selectIndex += 1
				}
				that.getDefInspectStdBook()
			},

			nextItem2(type) {
				if (type == '-') {
					if (that.selectIndex2 == 0) return
					else that.selectIndex2 -= 1
				}
				if (type == '+') {
					if (that.selectIndex2 == that.materialList2.length - 1) return
					else that.selectIndex2 += 1
				}
				that.getMonthMaterialUseList()
			},

			countMonthMaterialUse() {
				let thisParams = {
					defenceId: that.params.defenceId,
					recordDate: that.params.recordDate
				}
				that.ajax({
					url: '/gasOutlet/defDet/countMonthMaterialUse',
					data: JSON.stringify(thisParams),
					contentType: 'application/json',
					success: function(result) {
						that.materialList1 = result.data
						that.getDefInspectStdBook()
						// if (!that.selectItem1.materialId && that.materialList1 && that.materialList1.length > 0) that
						// 	.selectItem1 = that.materialList1[0]
					},
				}, "加载中...")
			},

			countYearMaterialUse() {
				let thisParams = {
					defenceId: that.params2.defenceId,
					year: that.params2.recordDate
				}
				that.ajax({
					url: '/gasOutlet/defDet/countYearMaterialUse',
					data: JSON.stringify(thisParams),
					contentType: 'application/json',
					success: function(result) {
						that.materialList2 = result.data
						that.getMonthMaterialUseList()
					},
				}, "加载中...")
			},

			getMonthMaterialUseList() {
				let thisParams = {
					defenceId: that.params2.defenceId,
					year: that.params2.recordDate
				}
				if (that.materialList2.length > 0) thisParams.materialId = that.materialList2[that.selectIndex2].materialId
				that.ajax({
					url: '/gasOutlet/defDet/getMonthMaterialUseList',
					data: JSON.stringify(thisParams),
					contentType: 'application/json',
					success: function(result) {
						let xAxisData = []
						let seriesData1 = []
						for (let item of result.data) {
							xAxisData.push(item.dateStr)
							seriesData1.push(item.qty)
						}

						var chartDom = document.getElementById('chart12');
						var myChart = echarts.init(chartDom);
						var option;

						option = {
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'shadow'
								}
							},
							legend: {
								x: 'right', // 可设定图例在左、右、居中
								y: 'center', // 可设定图例在上、下、居中
								left: 'right',
								orient: "vertical"
							},
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							xAxis: [{
								type: 'category',
								data: xAxisData,
								//show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
								axisTick: {
									show: false // 不显示坐标轴刻度线
								},
								axisLine: {
									show: false, // 不显示坐标轴线
								},
								axisLabel: {
									show: true, // 不显示坐标轴上的文字
								},
								splitLine: {
									show: false // 不显示网格线
								}
							}],
							yAxis: [{
								type: 'value',
								//show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
								axisTick: {
									show: false // 不显示坐标轴刻度线
								},
								axisLine: {
									show: false, // 不显示坐标轴线
								},
								axisLabel: {
									show: false, // 不显示坐标轴上的文字
								},
								splitLine: {
									show: false // 不显示网格线
								}
							}],
							series: [{

								type: 'bar',
								emphasis: {
									focus: 'series'
								},
								label: {
									show: true,
								},
								itemStyle: {
									// 设置柱状图颜色
									color: '#63CD92',
								},
								barWidth: '22',
								data: seriesData1
							}, ]
						};

						option && myChart.setOption(option);
					},
				}, "加载中...")

			},

			getDefInspectStdBook() {
				if (that.materialList1.length > 0) that.params.materialId = that.materialList1[that.selectIndex].materialId
				that.ajax({
					url: '/entAuxiliaryMaterial/purchase/pageUse?ticketId=' + Session.get('token') +
						'&pageIndex=' + that.params.pageIndex + '&pageSize=' + that.params.pageSize,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						that.dataList1 = result.data.records
					},
				}, "加载中...")
			},
		}
	}
</script>

<style scoped>

</style>